<template>
    <div class="message animated fadeIn">
        <div class="box">   
            <div class="item" v-for='item in messageList' :key='item'>
                <div class='img_box'><img :src="item.avatar" alt=""></div>
                <div class="item_box">
                    <span style='font-weight:700;'>{{item.commitName}} </span>
                    <span>{{item.commitBody}}</span>
                    <div class="item_bottom">
                        <span style="margin-right:20rpx;">{{item.creat_time}}</span>
                        <span v-if='item.love'>{{item.love}}次赞</span>
                        <span v-if='!item.love'>0次赞</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <img :src="userInfo.avatarUrl" alt="">
            <input type="text" placeholder="添加留言..." v-model='commitBody'>
            <span @tap='addMsg()'>发布</span>
        </div>      
    </div>
</template>

<script>
import HForm from 'components/form'
import HFormlist from 'components/formlist'
import tools from 'common/js/h_tools'
export default {
  name: 'Message',
  components: {
    HForm,
    HFormlist
  },
  data () {
    return {
      isOpen: false,
      desc: '',
      messageList: [],
      openId: '',
      userInfo: '',
      isForm: false,
      isVideo: false,
      isFormlist: false,
      formList: [],
      commitBody:'',
      blogId:''
    }
  },
  onLoad (options) {
    this.blogId = options.id
    this.getMsg()
  },
  created(){
       this.getUserInfo()
  },
  methods: {
    getUserInfo(){
        var that = this
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
          }
        })
    },
    async getMsg(){
        console.log(this.blogId)
        let res = await wx.cloud.callFunction({name: 'getBlogMsg',data:{blogId:this.blogId}})
        let messageList = JSON.parse(res.result).data
        messageList.forEach(item=>{
            var dateStr = new Date(item.creat_time).getTime()
            console.log(dateStr)
            item.creat_time = this.friendlyDate(dateStr) 
        })
        this.messageList = messageList
    },
    async addMsg(){
        if(this.commitBody!=''){
            var res = await wx.cloud.callFunction({name: 'addCommit',data: {commitName:this.userInfo.nickName,commitBody:this.commitBody,avatar:this.userInfo.avatarUrl,blogId:this.blogId}})
            let ret = JSON.parse(res.result)
            console.log(ret)
            if(ret.success){
                this.commitBody = ''
                wx.showToast({
                    title: '评论成功~',
                    icon: 'none',
                    duration: 1000,
                    mask: true
                })
            }
            this.getMsg()
        }else{
            wx.showToast({
                title: '不能发送空留言哦~小坏蛋',
                icon: 'none',
                duration: 1000,
                mask: true
            })
        }
    },
    friendlyDate(datsStr) {
        let dateObj = typeof datsStr === 'object' ? datsStr : new Date(datsStr)
        let time = dateObj.getTime()
        let now = Date.now()
        let space = now - time
        let str = ''
    
        switch (true) {
        case space < 60000:
            str = '刚刚'
            break
        case space < 1000*3600:
            str = Math.floor(space/60000) + '分钟前'
            break
        case space < 1000*3600*24:
            str = Math.floor(space/(1000*3600)) + '小时前'
            break
        default:
            str = Math.floor(space/(1000*3600*24)) + '天前'
        }
        return str
    },
    getNowFormatDate () {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      const hh = now.getHours()
      const mm = now.getMinutes()
      const ss = now.getSeconds()
      let clock = year + '-'
      if (month < 10) {
        clock += '0'
      }
      clock += month + '-'
      if (day < 10) {
        clock += '0'
      }
      clock += day + ' '
      if (hh < 10) {
        clock += '0'
      }
      clock += hh + ':'
      if (mm < 10) {
        clock += '0'
      }
      clock += mm + ':'
      if (ss < 10) {
        clock += '0'
      }
      clock += ss
      return clock
    },

  },
  onPullDownRefresh () {
    console.log('下拉')
  }
}
</script>

<style>
    .item{

    }
</style>

<style scoped lang="stylus">
.message
    height 100%
    width 100%
    .box
        height 100%
        width 100%
        .place
            height 20rpx
        .place-end
            height 160rpx
        .item
            position relative
            display flex 
            align-items center 
            margin-top 60rpx 
            .aixin
                position absolute
                top 35% 
                right 0 
            .img_box     
                margin 0 30rpx
                img
                    width 75rpx
                    height 75rpx
                    border-radius 50%
            .item_box
                font-size 26rpx 
                line-height 31rpx
                padding-right 75rpx 
            .item_bottom
                margin-top 8rpx
                color #a2a2a2 
    .bottom
        position fixed
        background white
        bottom 0
        left 0
        height 90rpx 
        display flex 
        align-items center
        border-top 1px solid #e2e2e2 
        width 100% 
        padding 2rpx 0 
        img
            width 75rpx
            height 75rpx
            border-radius 50%
            margin 0 30rpx
        input 
            font-size 30rpx
        span 
            margin-left 210rpx 
            font-size 30rpx 
            color #ffc131 
    .dialog
        position fixed
        bottom 0
        left 0
        z-index 99
        background #fff
        width 100%
        textarea
            height 200rpx
            line-height 42rpx
            font-size 30rpx
            color #333
            resize none
            outline none
            padding 30rpx
            width 690rpx
            background #f5f5f5
            &::-webkit-input-placeholder
                font-size 30rpx
                color #999
        .btn
            height 120rpx
            display flex
            justify-content center
            align-items center
            .left, .right
                height 80rpx
                line-height 80rpx
                font-size 28rpx
                flex 2
                color #fff
                background #ED695D
                margin 0 20rpx 0 30rpx
            .right
                flex 1
    .video-dialog
        position fixed
        right 10rpx
        top 200rpx
        width 100rpx
        height 100rpx
        box-shadow 0 0 10rpx rgba(0, 0, 0, 0.1)
        background #fff
        border-radius 16rpx
        image
            width 100%
            height 100%
    .form-dialog
        position fixed
        right 10rpx
        top 320rpx
        width 100rpx
        height 100rpx
        box-shadow 0 0 10rpx rgba(0, 0, 0, 0.1)
        background #fff
        border-radius 50rpx
        image
            width 100%
            height 100%
    .video, .form, .form-list
        position fixed
        top 0
        bottom 0
        left 0
        right 0
        background #fff
        z-index 99
    .form-list
        background rgba(0, 0, 0, 0.5)
</style>
